<template>
	<view class="content">
    <view class="search">
      <uni-search-bar placeholder="请输入搜索关键词" @confirm="search" cancelButton="none" radius="28">
        <template v-slot:searchIcon>
          <text class="iconfont icon-fangdajing" style="font-size: 36rpx;"></text>
        </template>
      </uni-search-bar>
      <view class="u-p-l-32 u-p-r-32">
        <view class="u-p-t-32 u-p-b-32" @click="dropdownShow = true">
          想看什么？
        <u-icon name="arrow-down" size="24" style="margin-left: 10rpx;"></u-icon>
        </view>
      </view>
    </view>
    <view style="height: 212rpx;"></view>  
    <view>
      <view class="circle-item">
        <view class="list-item" v-for="(item,index) in 33" :key="index">
          <view class="list-item__container" @click="CircleJoin">
            <view class="list-item__header">
              <view class="list-item__icon">
                <image src="/static/logo.png" mode="scaleToFill" class="list-item__icon-img"></image>
              </view>
            </view>
            <view class="list-item__content list-item__content--center">
              <text class="list-item__content-title">广东爱车族</text>
              <text class="list-item__content-note">30人已加入</text>
            </view>
            <view class="list-item__extra">
              <view class="list-item__extra-j">
                <text class="iconfont icon-jiahao list-item__extra-icon"></text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 100rpx;"></view>  
    
    <Specification 
      v-model="specificationShow" 
      mode="center" 
      width="80%" 
      :closeable="true" 
      close-icon-pos="center"
      :mask-close-able="false"
      :list="list">
    </Specification>
    <u-popup v-model="dropdownShow" mode="top">
      <view class="slot-content">
        <view class=""><text>我的圈子</text></view>
      	<view class="item-box">
      		<view class="item" :class="[item.active ? 'active' : '']" @tap="tagClick1(index)" v-for="(item, index) in look1" :key="index">
      			{{item.label}}
      		</view>
      	</view>
      </view>
      <view class="slot-content">
        <view class=""><text>砖家达人</text></view>
      	<view class="item-box">
      		<view class="item" :class="[item.active ? 'active' : '']" @tap="tagClick2(index)" v-for="(item, index) in look2" :key="index">
      			{{item.label}}
      		</view>
      	</view>
      </view>
      <view class="slot-content">
        <view class=""><text>官方优选</text></view>
      	<view class="item-box">
      		<view class="item" :class="[item.active ? 'active' : '']" @tap="tagClick3(index)" v-for="(item, index) in look3" :key="index">
      			{{item.label}}
      		</view>
      	</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
	export default {
		data() {
			return {
        look1: [{
        		label: '二刺螈文化交流',
        		active: true,
        	},
        	{
        		label: '军神爱好者',
        		active: false,
        	},
        	{
        		label: '爱车一族',
        		active: false,
        	},
        ],
        look2: [{
        		label: '生活干货',
        		active: true,
        	},
        	{
        		label: '知识科普',
        		active: false,
        	},
        	{
        		label: '游戏攻略',
        		active: false,
        	},
        	{
        		label: '好物分享',
        		active: false,
        	},
        ],
        look3: [{
        		label: '热门神贴',
        		active: true,
        	},
        	{
        		label: '精彩分享',
        		active: false,
        	},
        	{
        		label: '值得一看',
        		active: false,
        	},
        	{
        		label: '消遣娱乐',
        		active: false,
        	},
        ],
        list: [{
        		label: '规格1',
        		active: true,
        	},
        	{
        		label: '规格2',
        		active: false,
        	},
        ],
        specificationShow:false,
        dropdownShow:false,
      }
		},
		onLoad() {
      
		},
		methods: {
      tagClick1(index) {
      	this.look1[index].active = !this.look1[index].active;
      },
      tagClick2(index) {
      	this.look2[index].active = !this.look2[index].active;
      },
      tagClick3(index) {
      	this.look3[index].active = !this.look3[index].active;
      },
      CircleJoin(){
        uni.navigateTo({
        	url: '/pages/Circle/CircleJoin/CircleJoin?Name=广东爱车族'
        });
      },
		}
	}
</script>

<style lang="scss" scoped>
	.content {
    .home-img{
      width: 100%;
      height: 100%;
    }
    .search{
      background-color: #ffffff;
      width: 100%;
      position: fixed;
      z-index: 1;
    }
    .circle-item{
      padding: 0 32rpx;
      .list-item{
        display: flex;
        font-size: 32rpx;
        position: relative;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        flex-direction: row;
        cursor: pointer;
        padding: 32rpx;
        margin-top: 24rpx;
        border-radius: 28rpx;
        .list-item__container{
          position: relative;
          display: flex;
          flex-direction: row;
          flex: 1;
          overflow: hidden;
          .list-item__header {
            display: flex;
            flex-direction: row;
            align-items: center;
            .list-item__icon{
              margin-right: 18rpx;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              .list-item__icon-img{
                display: block;
                height: 90rpx;
                width: 170rpx;
                margin-right: 20rpx;
                border-radius: 16rpx;
                overflow: hidden;
              }
            }
          }
          .list-item__content{
            display: flex;
            padding-right: 16rpx;
            flex: 1;
            color: #3b4144;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            .list-item__content-title{
              font-size: 32rpx;
              color: #3b4144;
              overflow: hidden;
            }
            .list-item__content-note{
              margin-top: 8rpx;
              color: #999;
              font-size: 24rpx;
              overflow: hidden;
            }
          }
          .list-item__content--center{
            justify-content: center;
          }
          .list-item__extra{
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            .list-item__extra-j{
              width: 52rpx;
              height: 52rpx;
              border-radius: 50rpx;
              background-color: #fed500;
              display: flex;
              align-items: center;
              justify-content: center;
              .list-item__extra-icon{
                font-size: 38rpx;
              }
            }
          }
        }
      }
    }
	}
</style>
